<template>
    <div class="login-box">

        <el-form ref="loginFormRef" style="max-width: 600px" label-width="auto" class="loginForm">

            <h1>后台登录</h1>
            <el-form-item label="账号">
                <el-input v-model="loginName" autocomplete="off" clearable/>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="password" type="password" autocomplete="off"  show-password/>
            </el-form-item>
            <el-form-item>
                <el-button class="sub-btn" type="primary" @click="submit()">
                    登录
                </el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import { onMounted, getCurrentInstance, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { postLogin } from '../../api/login'
export default {
    setup () {

        const router = useRouter()

        const user = reactive({
            loginName: 'admin',
            password: '111111'
        })

        const submit = async()=>  {
            console.log('submit')
            const obj = {userName: user.loginName, password: user.password}
            postLogin(obj).then((res)=> {
                if(res.code == 200 && res.status) {
                    localStorage.setItem('token', res.data.token)
                    // 放入路由信息
                    ElMessage({
                        message: '用户登录成功.',
                        type: 'success',
                    })
                    // getUserInfo(res.data.token)
                    router.push({name: 'home'})
                } else {
                    ElMessage.error('用户名或密码错误.')
                }
            });
        
        }

        return {
            ...toRefs(user),
            submit
        }
    }
}
</script>

<style lang="scss" scoped>
    .login-box {
        width: 100%;
        height: 100vh;
        background: url('https://cn.bing.com//th?id=OHR.BrazilRainforest_ZH-CN6432366530_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp');
        box-sizing: border-box;
        padding-top: 200px;
        .loginForm {
            width: 400px;
            padding: 20px;
            background-color: #fff;
            border-radius: 20px;
            margin: 0 auto;
            .sub-btn {
                width: 100%;
            }
            h1 {
                text-align: center;
                margin: 20px 0;
            }
        }
    }
</style>